<template>
	<div class="app-container">
		<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
			v-model="form" ref="crud" @search-change="searchChange" @search-reset="searchReset"
			@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
			@refresh-change="refreshChange" @on-load="onLoad">
			<template slot-scope="{ row }" slot="menu">
				<el-button size="small" type="text" @click="details(row.id)">心电诊断</el-button>
				<el-button size="small" type="text" @click="remark" v-if="row.hasRemark">诊断查询</el-button>
			</template>

			<template slot-scope="{ row }" slot="hasRemark">
				<el-tag :type="row.hasRemark == 1 ? 'success' : 'danger'">{{ row.hasRemark == 1 ? '已诊断' : '未诊断' }}</el-tag>
			</template>
		</avue-crud>
		<remarkModal ref="remarkModal"></remarkModal>
	</div>
</template>
<script>
	import dayjs from 'dayjs';
	import {
		getList
	} from '@/api/ecgManage/ecgList';
	import {
		crudMxins
	} from '@/mixins/index';
	import remarkModal from './remarkModal.vue';
	export default {
		mixins: [crudMxins],
		components: {
			remarkModal
		},
		activated() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs.crud.doLayout();
					if (!this.loading) {
						this.onLoad(this.page);
					}
				});
			}, 100);
		},
		data() {
			return {
				data: [],
				currentRow: null,
				deptOptions: [],
				userList: []
			};
		},
		computed: {
			option() {
				return {
					index: true,
					indexLabel: '序号',
					calcHeight: 30,
					searchShow: true,
					searchMenuSpan: 5,
					addBtn: false,
					editBtn: false,
					searchLabelWidth: 120,
					dialogClickModal: false,
					dialogDrag: true,
					tip: false,
					border: true,
					menu: true,
					searchIndex: 10,
					searchIcon: true,
					span: 12,
					viewBtn: false,
					delBtn: false,
					menuWidth: 200,
					column: [{
							label: '病人姓名',
							prop: 'username',
							search: true
						},
						{
							label: '同步日期',
							prop: 'report_date',
							search: true
						},
						{
							label: '所属医院',
							prop: 'deptId'
						},
						{
							label: '接诊医生',
							prop: 'doctor'
						},
						{
							label: '转诊专家',
							prop: 'tdoctor'
						},
						{
							label: '是否诊断',
							prop: 'hasRemark',
							type: 'select',
							search: true,
							dicData: [{
									label: '已诊断',
									value: 1
								},
								{
									label: '未诊断',
									value: 0
								}
							]
						},
						{
							label: '诊断医生',
							prop: 'sex'
						},
						{
							label: '诊断时间',
							prop: 'sex'
						}
					]
				};
			}
		},
		created() {},
		methods: {
			onLoad(page, params = {}) {
				this.loading = true;
				this.data = [{
						username: '张多多',
						tdoctor: '张医生',
						remark: '心颤',
						hasRemark: 1
					},
					{
						username: '张凡',
						tdoctor: '张医生',
						remark: '心颤',
						hasRemark: 0
					}
				];
				this.loading = false;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					console.log(res, 'res');
					this.page.total = res.data.totalCount;
					this.data = res.data.configCenterList || [{
							username: '张多多',
							tdoctor: '张医生',
							remark: '心颤',
							hasRemark: 1
						},
						{
							username: '张凡',
							tdoctor: '张医生',
							remark: '心颤',
							hasRemark: 0
						}
					];
					this.loading = false;
					this.selectionClear();
				});
			},
			getTreeselect() {
				listSimpleDepts().then(response => {
					// 处理 deptOptions 参数
					this.deptOptions = [];
					this.deptOptions.push(...this.handleTree(response.data, 'id'));
				});
			},
			sendDevice() {
				this.$refs.sendEcg.handleOpen();
			},
			asyncData() {
				this.$refs.asyncData.handleOpen();
			},
			remark() {
				this.$refs.remarkModal.handleOpen();
			},
			details() {
				this.$router.push({
					path: '/ecgManage/ecgList/details',
					query: {
						id: 123
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.handle-btn {
		margin-top: 20px;
		text-align: right;
	}

	.remarks {
		display: inline-block;
		margin-top: 20px;
	}
</style>